<template>
  <!-- 1.21 添加静态结构 -->
  <div class="container">
    <div class="close">
      <div class="iconfont iconicon-test" @click="$router.go(-1)"></div>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <div class="inputs">
      <!--1.45 使用封装输入框 -->
      <!-- 使用子组件的时候,为子组件复制属性,优先给子组件的props成员赋值,
      如果props中没有对应的设置,那么就直接给组件的根元素赋值 -->
      <!-- 1.46 使用 v-model 监听值得变化赋值 只能监听input事件 -->
      <!-- 1.48 添加正则判断输入内容 利用v-bind 监听修改触发事件-->
      <!-- 用户手机号的正则: /^1[3|4|5|7|8][0-9]{9}$/ -->
      <myinp
        placeholder="用户名 / 手机号码"
        :rules="/^1\d{10}$/"
        v-model="user.username"
        msg="账号格式有误"
      />
      <myinp
        placeholder="昵名"
        :rules="/^[0-9A-Za-z_\u4e00-\u9fa5]{2,6}$/"
        v-model="user.nickname"
      />
      <!-- 密码正则6-18位必须有字母和数字:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/ -->
      <myinp
        placeholder="密码"
        v-model="user.password"
        type="password"
        :rules="/^\d{6,18}$/"
        msg="请输入6-18位密码"
      />
    </div>
    <p class="tips">
      已有账号？
      <a href="#/login" class="">去登录</a>
    </p>

    <!-- 1.36 使用封装按钮 -->
    <!-- 1.38 添加动态输入type值实现不同的样式 -->
    <mybtn @myclick="register" type="primary">注册</mybtn>
  </div>
</template>

<script>
/* 1.34 引用组件 */
import mybtn from "@/components/hmbutton.vue";
/* 1.43 引用组件 */
import myinp from "@/components/hminput.vue";
/* 2.61 引入axios  */
import { userregister } from "@/apis/user.js";

export default {
  components: {
    //1.35 注册按钮
    mybtn,
    //1.44 注册按钮
    myinp,
  },
  methods: {
    async register() {
      /* 2.62 实现注册功能 */
      let res = await userregister(this.user);
      console.log(res);
      if (res.data.message == "注册成功") {
        this.$toast.success(res.data.message);
        // 路由跳转
        this.$router.push({ name: "login" });
      } else {
        this.$toast.success("注册失败，请重试");
      }
    },
  },
  data() {
    return {
      /* 1.47 定义user对象的属性 */
      user: {
        username: "",
        nickname: "",
        password: "",
      },
    };
  },
};
</script>
<style lang="less" scoped>
/* 1.22 添加静态样式 */
.container {
  padding: 20px;
  background-color: #eee;
}

.close {
  .iconfont {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>